<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取焦点</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        input:focus{
            background-color: coral;
        }
    </style>
</head>

<body>
<div id="app">
<div>页面载入时，自动获取焦点</div>
<input v-focus/>
</div>


<script>

    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })


    var v = new Vue({
        el: '#app',

        //局部指令
        // directives: {
        //     focus: {
        //         // 指令的定义
        //         inserted: function (el) {
        //             el.focus()
        //         }
        //     }
        // }

    })


</script>

</body>
</html>